Using ScrollView and SafeAreaView in React Native

Course: React Native Training

Topic: Using ScrollView and SafeAreaView

Course Link: React Native Training at JustAcademy

Demo Link: Register for a Course Demo

Website: JustAcademy Official Website

1. Introduction to ScrollView and SafeAreaView

ScrollView and SafeAreaView are important concepts in React Native application development. They help developers create mobile interfaces that display content correctly across different screen sizes and device layouts.

ScrollView is a component that allows users to scroll through content when it does not fit within the visible screen area. It is commonly used for forms, profile screens, settings pages, product details, article pages, and informational screens.

SafeAreaView is a component intended to keep content within the safe area of a device screen. It helps prevent interface elements from being placed underneath areas such as the iPhone notch, status bar region, or rounded screen corners. However, React Native's built-in SafeAreaView is deprecated, so new projects should generally use the recommended safe-area solution from the react-native-safe-area-context library.

Understanding both concepts helps developers build applications that are scrollable, responsive, and comfortable to use.

Learning Objectives

• Understand the purpose of ScrollView and SafeAreaView.
• Learn how to create vertically and horizontally scrollable content.
• Understand ScrollView properties and event handlers.
• Learn how to configure scroll indicators and content spacing.
• Understand safe areas and device-specific screen insets.
• Use safe-area-context to build modern React Native layouts.
• Combine ScrollView and safe-area handling in a single screen.
• Learn about keyboard handling, refresh controls, and nested scrolling.
• Understand performance considerations and common mistakes.
• Build a practical scrollable profile screen.

2. What Is ScrollView?

ScrollView is a built-in React Native component that allows users to move through content that extends beyond the visible area of the screen.

Unlike a normal View, which displays content within its layout boundaries, ScrollView provides scrolling behavior when its content is larger than the available viewport.

Basic Syntax

import React from 'react';
import { ScrollView, Text, View } from 'react-native';

export default function App() {
  return (
    <ScrollView>
      <View>
        <Text>Welcome to React Native</Text>
        <Text>This is scrollable content.</Text>
        <Text>Add more content here.</Text>
      </View>
    </ScrollView>
  );
}

How ScrollView Works

1. The ScrollView creates a visible viewport for its content.
2. Its children are laid out inside a scrollable content area.
3. When the content exceeds the viewport, users can scroll to view additional content.
4. Scrolling can be vertical or horizontal.
5. Additional properties control indicators, padding, scrolling behavior, and events.

Common Use Cases

• Registration and login forms.
• Long profile screens.
• Settings and preferences pages.
• Product descriptions and detail pages.
• Terms and conditions screens.
• Frequently asked questions.
• Articles and help documentation.
• Small lists of cards or information sections.

3. Creating a Basic ScrollView

The simplest way to make a screen scrollable is to wrap its content inside a ScrollView component.

Example

import React from 'react';
import {
  View,
  Text,
  ScrollView,
  StyleSheet
} from 'react-native';

export default function App() {
  return (
    <ScrollView style={styles.container}>
      <Text style={styles.heading}>My Learning Page</Text>

      <View style={styles.card}>
        <Text style={styles.title}>Introduction</Text>
        <Text>
          Learn the basic concepts of mobile application development.
        </Text>
      </View>

      <View style={styles.card}>
        <Text style={styles.title}>Components</Text>
        <Text>
          Understand View, Text, Image, ScrollView, and other components.
        </Text>
      </View>

      <View style={styles.card}>
        <Text style={styles.title}>Styling</Text>
        <Text>
          Learn Flexbox, spacing, alignment, and reusable styles.
        </Text>
      </View>

      <View style={styles.card}>
        <Text style={styles.title}>Projects</Text>
        <Text>
          Apply the concepts by creating practical mobile applications.
        </Text>
      </View>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f8fafc'
  },
  heading: {
    fontSize: 26,
    fontWeight: 'bold',
    padding: 20
  },
  card: {
    backgroundColor: '#ffffff',
    padding: 20,
    marginHorizontal: 16,
    marginBottom: 14,
    borderRadius: 10
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 8
  }
});

Explanation

• ScrollView makes the page scrollable.
• flex: 1 allows the ScrollView to occupy the available space within its parent.
• backgroundColor defines the background of the scroll area.
• padding and margin improve the spacing between elements.
• View groups related content into separate sections or cards.

For a ScrollView to work as expected, its layout must have a constrained height. In most full-screen layouts, using flex: 1 on the relevant parent containers helps ensure that scrolling occurs within the available screen area.

4. Vertical Scrolling

Vertical scrolling is the default behavior of ScrollView. Users move upward or downward to access content that extends beyond the visible screen.

Example

<ScrollView>
  <Text>Section 1</Text>
  <Text>Section 2</Text>
  <Text>Section 3</Text>
  <Text>Section 4</Text>
  <Text>Section 5</Text>
</ScrollView>

Vertical scrolling is suitable for long forms, settings screens, profile pages, product details, and article content.

Important Points

• Vertical scrolling is enabled by default.
• Content is arranged vertically unless the layout styles change its arrangement.
• The user can scroll when content exceeds the visible area.
• Use spacing and headings to make long content easier to navigate.
• Avoid placing a very large data collection inside a ScrollView when a virtualized list is more appropriate.

5. Horizontal Scrolling

Horizontal scrolling allows users to move left and right through content. It is useful for image galleries, product carousels, category chips, and horizontally arranged cards.

Example

import React from 'react';
import {
  ScrollView,
  View,
  Text,
  StyleSheet
} from 'react-native';

export default function HorizontalCards() {
  return (
    <ScrollView
      horizontal
      showsHorizontalScrollIndicator={false}
      contentContainerStyle={styles.content}
    >
      <View style={styles.card}>
        <Text>React Native</Text>
      </View>

      <View style={styles.card}>
        <Text>JavaScript</Text>
      </View>

      <View style={styles.card}>
        <Text>API Integration</Text>
      </View>

      <View style={styles.card}>
        <Text>Projects</Text>
      </View>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  content: {
    paddingHorizontal: 16,
    paddingVertical: 12
  },
  card: {
    width: 150,
    height: 100,
    marginRight: 12,
    borderRadius: 10,
    backgroundColor: '#dbeafe',
    justifyContent: 'center',
    alignItems: 'center'
  }
});

Important Property

horizontal={true} changes the ScrollView direction from vertical to horizontal.

showsHorizontalScrollIndicator={false} hides the horizontal scroll indicator. The content remains scrollable even when the indicator is hidden.

Common Applications

• Image galleries.
• Featured products.
• Category navigation bars.
• Horizontal cards and dashboards.
• Onboarding slides.

6. Understanding ScrollView Properties

ScrollView provides several properties for controlling how content is displayed and how scrolling behaves.

Use only the properties that support the intended user experience. Some properties behave differently across platforms, so test important scrolling behavior on both Android and iOS.

7. Understanding contentContainerStyle

The contentContainerStyle property styles the inner container that wraps the ScrollView's children. It is particularly useful for arranging content and controlling spacing.

By contrast, the style prop styles the ScrollView itself, which acts as the visible viewport.

Example

<ScrollView
  style={{ flex: 1, backgroundColor: '#f1f5f9' }}
  contentContainerStyle={{
    padding: 20,
    paddingBottom: 40,
    alignItems: 'stretch'
  }}
>
  <Text>Scrollable Content</Text>
  <Text>Additional Content</Text>
</ScrollView>

Difference Between style and contentContainerStyle

If you want padding around all scrollable content, use contentContainerStyle. If you want to control how much screen space the scrolling region occupies, use the ScrollView's style and its parent layout.

8. Controlling Scroll Indicators

Scroll indicators help users understand that more content is available beyond the visible area. React Native allows developers to show or hide the vertical and horizontal indicators.

Example

<ScrollView
  showsVerticalScrollIndicator={false}
  showsHorizontalScrollIndicator={false}
>
  <Text>Content that can be scrolled</Text>
</ScrollView>

Hiding indicators can produce a cleaner interface, especially for horizontally scrolling card rows. However, indicators can also help users discover scrollable content, so choose the behavior carefully.

9. Programmatic Scrolling with a Ref

A React ref can provide access to the ScrollView's methods. This allows the application to scroll to a particular position when the user performs an action.

Example: Scroll to the Top

import React, { useRef } from 'react';
import {
  View,
  Text,
  ScrollView,
  Pressable,
  StyleSheet
} from 'react-native';

export default function App() {
  const scrollRef = useRef(null);

  const scrollToTop = () => {
    scrollRef.current?.scrollTo({
      y: 0,
      animated: true
    });
  };

  return (
    <View style={styles.container}>
      <Pressable style={styles.button} onPress={scrollToTop}>
        <Text style={styles.buttonText}>Back to Top</Text>
      </Pressable>

      <ScrollView ref={scrollRef}>
        {Array.from({ length: 20 }, (_, index) => (
          <View key={index} style={styles.card}>
            <Text>Section {index + 1}</Text>
          </View>
        ))}
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 12
  },
  button: {
    padding: 12,
    backgroundColor: '#2563eb',
    borderRadius: 8,
    alignItems: 'center',
    marginBottom: 10
  },
  buttonText: {
    color: '#ffffff',
    fontWeight: 'bold'
  },
  card: {
    padding: 25,
    backgroundColor: '#e2e8f0',
    marginBottom: 10,
    borderRadius: 8
  }
});

Important Methods

• scrollTo() scrolls to a specified x and y position.
• scrollToEnd() scrolls to the end of the content.
• scrollTo({ y: 0, animated: true }) returns to the top with animation.

When using a ref, ensure the ScrollView is mounted before calling its methods. Optional chaining helps avoid errors if the ref is not available at the moment of the call.

10. Handling Scroll Events

The onScroll property allows a component to receive information about the current scroll position. The event includes details such as the content offset and visible layout dimensions.

Example

import React, { useState } from 'react';
import {
  View,
  Text,
  ScrollView,
  StyleSheet
} from 'react-native';

export default function ScrollPositionExample() {
  const [scrollY, setScrollY] = useState(0);

  return (
    <View style={styles.container}>
      <Text style={styles.position}>
        Scroll position: {Math.round(scrollY)}
      </Text>

      <ScrollView
        style={styles.scrollView}
        scrollEventThrottle={16}
        onScroll={(event) => {
          setScrollY(event.nativeEvent.contentOffset.y);
        }}
      >
        {Array.from({ length: 20 }, (_, index) => (
          <View key={index} style={styles.card}>
            <Text>Content Section {index + 1}</Text>
          </View>
        ))}
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 12
  },
  position: {
    padding: 12,
    fontWeight: 'bold'
  },
  scrollView: {
    flex: 1
  },
  card: {
    height: 120,
    marginBottom: 12,
    backgroundColor: '#dbeafe',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 8
  }
});

The scroll position is obtained from event.nativeEvent.contentOffset.y. Updating React state for every scroll event can cause frequent re-renders. For production interfaces, consider whether continuous state updates are necessary, and use an animation system or a carefully designed event handler when performance matters.

11. What Is SafeAreaView?

Safe-area handling helps prevent content from overlapping areas of a device screen that are reserved for system interface elements. These areas can include the status bar, a camera notch, rounded corners, and the home indicator region.

React Native historically included a built-in SafeAreaView component. That component is deprecated, and its behavior has platform limitations. For modern applications, the react-native-safe-area-context library is generally recommended because it provides safe-area insets and components for handling them more consistently.

Why Safe Areas Matter

• Keep headings and important controls away from screen cutouts.
• Prevent buttons from being placed too close to system navigation areas.
• Improve the layout on devices with different screen shapes.
• Make content more comfortable to read and interact with.
• Support layouts that adapt to device-specific safe-area insets.

Important Note

The built-in React Native SafeAreaView is deprecated. For new projects, use SafeAreaProvider, SafeAreaView, or the useSafeAreaInsets hook from react-native-safe-area-context, as appropriate for your application.

12. Installing react-native-safe-area-context

For a modern safe-area implementation, install the react-native-safe-area-context package.

Installation Command

npm install react-native-safe-area-context

If your project uses Yarn, run:

yarn add react-native-safe-area-context

For Expo projects, use the Expo-compatible installation command so that the package version matches your SDK:

npx expo install react-native-safe-area-context

React Native CLI projects may require rebuilding the native application after installing a native dependency. Follow the installation instructions for the version of the library used by your project.

13. Using SafeAreaProvider and SafeAreaView

SafeAreaProvider provides safe-area information to the components and hooks inside it. The library's SafeAreaView can then apply padding based on selected safe-area edges.

Example

import React from 'react';
import {
  View,
  Text,
  StyleSheet
} from 'react-native';

import {
  SafeAreaProvider,
  SafeAreaView
} from 'react-native-safe-area-context';

function HomeScreen() {
  return (
    <SafeAreaView style={styles.safeArea} edges={['top', 'right', 'bottom', 'left']}>
      <View style={styles.container}>
        <Text style={styles.heading}>Welcome</Text>
        <Text>Your content is placed inside the safe area.</Text>
      </View>
    </SafeAreaView>
  );
}

export default function App() {
  return (
    <SafeAreaProvider>
      <HomeScreen />
    </SafeAreaProvider>
  );
}

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
    backgroundColor: '#f8fafc'
  },
  container: {
    flex: 1,
    padding: 20
  },
  heading: {
    fontSize: 28,
    fontWeight: 'bold',
    marginBottom: 12
  }
});

Explanation

• SafeAreaProvider supplies safe-area context to descendant components.
• SafeAreaView from the library applies padding for the selected safe-area edges.
• edges determines which edges should receive safe-area padding.
• flex: 1 lets the safe-area container occupy available screen space.
• padding inside the content container adds ordinary design spacing.

In a typical application, place SafeAreaProvider near the application root so screens and navigation components can access safe-area information. Some navigation libraries or application templates may already provide this setup, so avoid unnecessarily nesting providers.

14. Understanding Safe-Area Insets

Safe-area insets represent the space needed around the screen edges. The useSafeAreaInsets hook returns an object containing the top, bottom, left, and right inset values.

Example

import React from 'react';
import {
  View,
  Text,
  StyleSheet
} from 'react-native';

import {
  SafeAreaProvider,
  useSafeAreaInsets
} from 'react-native-safe-area-context';

function ScreenContent() {
  const insets = useSafeAreaInsets();

  return (
    <View
      style={[
        styles.container,
        {
          paddingTop: insets.top,
          paddingBottom: insets.bottom,
          paddingLeft: insets.left,
          paddingRight: insets.right
        }
      ]}
    >
      <Text style={styles.heading}>Safe-Area Example</Text>
      <Text>Top inset: {insets.top}</Text>
      <Text>Bottom inset: {insets.bottom}</Text>
      <Text>Left inset: {insets.left}</Text>
      <Text>Right inset: {insets.right}</Text>
    </View>
  );
}

export default function App() {
  return (
    <SafeAreaProvider>
      <ScreenContent />
    </SafeAreaProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f8fafc'
  },
  heading: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 16
  }
});

When to Use Insets

• When creating a custom screen layout.
• When positioning a floating action button near a screen edge.
• When placing a bottom action bar above the home indicator area.
• When designing custom headers or overlays.
• When adjusting layout spacing based on device-specific screen edges.

Do not apply the same safe-area inset twice. If a parent SafeAreaView already adds safe-area padding for an edge, manually adding the same inset again may create excessive spacing.

15. Combining ScrollView with Safe-Area Handling

A common mobile layout uses safe-area handling around a screen and a ScrollView inside it. The safe-area container protects the screen content, while ScrollView allows the content to move when it exceeds the available height.

Example

import React from 'react';
import {
  View,
  Text,
  ScrollView,
  StyleSheet
} from 'react-native';

import {
  SafeAreaProvider,
  SafeAreaView
} from 'react-native-safe-area-context';

function ContentScreen() {
  return (
    <SafeAreaView style={styles.safeArea} edges={['top', 'right', 'bottom', 'left']}>
      <ScrollView
        style={styles.scrollView}
        contentContainerStyle={styles.content}
        showsVerticalScrollIndicator={false}
      >
        <Text style={styles.heading}>My Profile</Text>
        <Text style={styles.description}>
          Explore your personal information and application settings.
        </Text>

        {Array.from({ length: 12 }, (_, index) => (
          <View key={index} style={styles.card}>
            <Text style={styles.cardTitle}>Section {index + 1}</Text>
            <Text>
              This section contains additional information for the user.
            </Text>
          </View>
        ))}
      </ScrollView>
    </SafeAreaView>
  );
}

export default function App() {
  return (
    <SafeAreaProvider>
      <ContentScreen />
    </SafeAreaProvider>
  );
}

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
    backgroundColor: '#f8fafc'
  },
  scrollView: {
    flex: 1
  },
  content: {
    padding: 20,
    paddingBottom: 36
  },
  heading: {
    fontSize: 28,
    fontWeight: 'bold',
    marginBottom: 10
  },
  description: {
    fontSize: 16,
    color: '#475569',
    marginBottom: 20
  },
  card: {
    backgroundColor: '#ffffff',
    padding: 18,
    borderRadius: 10,
    marginBottom: 14
  },
  cardTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 8
  }
});

How This Layout Works

1. SafeAreaProvider makes safe-area information available.
2. SafeAreaView applies padding around the selected screen edges.
3. ScrollView occupies the available space inside the safe-area container.
4. The content container adds spacing around the scrollable sections.
5. Users can scroll through the cards without placing the screen content directly against unsafe screen edges.

16. Using Safe-Area Insets with a Fixed Header

Some screens have a header that stays visible while the content below it scrolls. In this layout, the header can remain outside the ScrollView, while the content occupies the remaining space.

Example

import React from 'react';
import {
  View,
  Text,
  ScrollView,
  StyleSheet
} from 'react-native';

import {
  SafeAreaProvider,
  SafeAreaView
} from 'react-native-safe-area-context';

function DashboardScreen() {
  return (
    <SafeAreaView style={styles.safeArea} edges={['top', 'left', 'right']}>
      <View style={styles.header}>
        <Text style={styles.headerText}>Dashboard</Text>
      </View>

      <ScrollView
        style={styles.scrollView}
        contentContainerStyle={styles.content}
      >
        {Array.from({ length: 15 }, (_, index) => (
          <View key={index} style={styles.card}>
            <Text style={styles.cardTitle}>Dashboard Item {index + 1}</Text>
            <Text>Additional information appears in this section.</Text>
          </View>
        ))}
      </ScrollView>
    </SafeAreaView>
  );
}

export default function App() {
  return (
    <SafeAreaProvider>
      <DashboardScreen />
    </SafeAreaProvider>
  );
}

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
    backgroundColor: '#f8fafc'
  },
  header: {
    backgroundColor: '#2563eb',
    padding: 18
  },
  headerText: {
    color: '#ffffff',
    fontSize: 22,
    fontWeight: 'bold'
  },
  scrollView: {
    flex: 1
  },
  content: {
    padding: 16,
    paddingBottom: 30
  },
  card: {
    backgroundColor: '#ffffff',
    padding: 18,
    marginBottom: 12,
    borderRadius: 10
  },
  cardTitle: {
    fontSize: 17,
    fontWeight: 'bold',
    marginBottom: 6
  }
});

Because the header is outside the ScrollView, it remains in place while the card content scrolls. The example protects the top, left, and right edges through SafeAreaView. The bottom edge is omitted intentionally because the ScrollView fills the remaining area and the screen does not include a fixed bottom action bar. Adjust edge handling to match your navigation and screen design.

17. ScrollView and Keyboard Handling

Forms often contain TextInput fields. When the keyboard opens, it can cover part of the screen and make some inputs difficult to access. ScrollView provides properties that help manage taps and scrolling while the keyboard is visible.

Important Properties

• keyboardShouldPersistTaps controls how taps on child elements are handled when the keyboard is visible.
• keyboardDismissMode controls keyboard dismissal behavior during scrolling where supported.
• automaticallyAdjustKeyboardInsets can adjust scroll-view insets when the keyboard changes on supported iOS versions.
• KeyboardAvoidingView can be used to adjust layout when the keyboard appears.

Example: Scrollable Form

import React from 'react';
import {
  View,
  Text,
  TextInput,
  ScrollView,
  Pressable,
  KeyboardAvoidingView,
  Platform,
  StyleSheet,
  Alert
} from 'react-native';

import {
  SafeAreaProvider,
  SafeAreaView
} from 'react-native-safe-area-context';

function RegistrationScreen() {
  const handleSubmit = () => {
    Alert.alert('Registration', 'Form submitted for demonstration.');
  };

  return (
    <SafeAreaView style={styles.safeArea}>
      <KeyboardAvoidingView
        style={styles.flex}
        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
      >
        <ScrollView
          contentContainerStyle={styles.content}
          keyboardShouldPersistTaps="handled"
          showsVerticalScrollIndicator={false}
        >
          <Text style={styles.heading}>Registration Form</Text>

          <Text style={styles.label}>Full Name</Text>
          <TextInput
            placeholder="Enter your name"
            style={styles.input}
            returnKeyType="next"
          />

          <Text style={styles.label}>Email Address</Text>
          <TextInput
            placeholder="Enter your email"
            keyboardType="email-address"
            autoCapitalize="none"
            style={styles.input}
            returnKeyType="next"
          />

          <Text style={styles.label}>Phone Number</Text>
          <TextInput
            placeholder="Enter your phone number"
            keyboardType="phone-pad"
            style={styles.input}
          />

          <Text style={styles.label}>Address</Text>
          <TextInput
            placeholder="Enter your address"
            multiline
            style={[styles.input, styles.multiline]}
          />

          <Pressable style={styles.button} onPress={handleSubmit}>
            <Text style={styles.buttonText}>Submit Registration</Text>
          </Pressable>
        </ScrollView>
      </KeyboardAvoidingView>
    </SafeAreaView>
  );
}

export default function App() {
  return (
    <SafeAreaProvider>
      <RegistrationScreen />
    </SafeAreaProvider>
  );
}

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
    backgroundColor: '#ffffff'
  },
  flex: {
    flex: 1
  },
  content: {
    padding: 20,
    paddingBottom: 40
  },
  heading: {
    fontSize: 26,
    fontWeight: 'bold',
    marginBottom: 24
  },
  label: {
    fontSize: 15,
    fontWeight: '600',
    marginBottom: 8
  },
  input: {
    borderWidth: 1,
    borderColor: '#cbd5e1',
    borderRadius: 8,
    padding: 12,
    marginBottom: 18,
    fontSize: 16
  },
  multiline: {
    minHeight: 100,
    textAlignVertical: 'top'
  },
  button: {
    backgroundColor: '#2563eb',
    padding: 16,
    borderRadius: 8,
    alignItems: 'center'
  },
  buttonText: {
    color: '#ffffff',
    fontWeight: 'bold'
  }
});

Explanation

• SafeAreaView keeps the form within the selected safe area.
• KeyboardAvoidingView adjusts the layout according to platform behavior.
• ScrollView lets users access fields that are not currently visible.
• keyboardShouldPersistTaps="handled" helps child controls receive taps while the keyboard is visible.
• Platform.OS lets the code use a different KeyboardAvoidingView behavior on iOS and Android.

Keyboard behavior depends on the operating system, screen layout, and Android window configuration. Test the form on actual devices or emulators and adjust the layout as needed.

18. Implementing Pull-to-Refresh

Pull-to-refresh lets users reload content by dragging the scrollable screen downward. It is common in news feeds, dashboards, account screens, and data-driven mobile applications.

React Native provides the RefreshControl component for this behavior. It is passed to ScrollView through the refreshControl prop.

Example

import React, { useState } from 'react';
import {
  View,
  Text,
  ScrollView,
  RefreshControl,
  StyleSheet
} from 'react-native';

export default function RefreshableScreen() {
  const [refreshing, setRefreshing] = useState(false);
  const [message, setMessage] = useState('Content is up to date.');

  const onRefresh = async () => {
    setRefreshing(true);

    try {
      await new Promise(resolve => setTimeout(resolve, 1200));
      setMessage('Content refreshed successfully.');
    } catch (error) {
      setMessage('Unable to refresh content.');
    } finally {
      setRefreshing(false);
    }
  };

  return (
    <ScrollView
      style={styles.container}
      contentContainerStyle={styles.content}
      refreshControl={
        <RefreshControl
          refreshing={refreshing}
          onRefresh={onRefresh}
        />
      }
    >
      <Text style={styles.heading}>My Dashboard</Text>
      <Text>{message}</Text>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  content: {
    padding: 20,
    flexGrow: 1
  },
  heading: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 12
  }
});

The example uses a short timeout to simulate refreshing. In a real application, replace it with a network request or data-loading function. Keep refreshing true while the operation is in progress, then reset it when the operation finishes.

19. ScrollView Versus FlatList

ScrollView is convenient for small amounts of content, but it renders all of its children at once. For long or dynamically loaded lists, FlatList is usually more suitable because it virtualizes list items and renders them as needed.

When Should You Use ScrollView?

• When the screen contains a small number of elements.
• When the content is a single form or article.
• When the layout consists of multiple static sections.
• When rendering all content at once is reasonable.

When Should You Use FlatList?

• When displaying hundreds or thousands of records.
• When working with data loaded from an API.
• When implementing a contact list, product catalog, or feed.
• When memory usage and scrolling performance are important.

20. Understanding Nested ScrollViews

A nested ScrollView occurs when one ScrollView is placed inside another. This can be useful when a page contains vertically scrolling content and a horizontally scrolling card row.

Example

import React from 'react';
import {
  View,
  Text,
  ScrollView,
  StyleSheet
} from 'react-native';

export default function NestedScrollExample() {
  return (
    <ScrollView style={styles.container}>
      <Text style={styles.heading}>Explore Categories</Text>

      <ScrollView
        horizontal
        showsHorizontalScrollIndicator={false}
        contentContainerStyle={styles.horizontalContent}
      >
        {['Technology', 'Design', 'Business', 'Marketing'].map(item => (
          <View key={item} style={styles.category}>
            <Text>{item}</Text>
          </View>
        ))}
      </ScrollView>

      {Array.from({ length: 12 }, (_, index) => (
        <View key={index} style={styles.card}>
          <Text style={styles.cardTitle}>Article {index + 1}</Text>
          <Text>This is an article summary in the main vertical page.</Text>
        </View>
      ))}
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  heading: {
    fontSize: 24,
    fontWeight: 'bold',
    padding: 16
  },
  horizontalContent: {
    paddingHorizontal: 16,
    paddingBottom: 16
  },
  category: {
    padding: 16,
    backgroundColor: '#dbeafe',
    borderRadius: 8,
    marginRight: 10
  },
  card: {
    backgroundColor: '#ffffff',
    padding: 18,
    marginHorizontal: 16,
    marginBottom: 12,
    borderRadius: 8
  },
  cardTitle: {
    fontWeight: 'bold',
    fontSize: 18,
    marginBottom: 8
  }
});

Nested Scrolling Best Practices

• Use nested scrolling only when it improves the user experience.
• Prefer different scroll directions for independent areas when appropriate.
• Be careful when nesting vertical ScrollViews because gesture handling can become confusing.
• On Android, investigate nestedScrollEnabled if nested scrolling behavior requires it.
• Avoid putting large FlatList collections inside a ScrollView without a clear reason.

21. Using Paging for Onboarding Screens

The pagingEnabled property makes a ScrollView settle at page-sized intervals. This can be used to create onboarding slides, image presentations, and simple horizontal page experiences.

Example

import React from 'react';
import {
  View,
  Text,
  ScrollView,
  useWindowDimensions,
  StyleSheet
} from 'react-native';

export default function OnboardingSlides() {
  const { width } = useWindowDimensions();

  const pages = [
    { title: 'Welcome', description: 'Discover the application.' },
    { title: 'Learn', description: 'Explore useful features.' },
    { title: 'Get Started', description: 'Begin your journey today.' }
  ];

  return (
    <ScrollView
      horizontal
      pagingEnabled
      showsHorizontalScrollIndicator={false}
    >
      {pages.map((page, index) => (
        <View
          key={page.title}
          style={[styles.page, { width }]}
        >
          <Text style={styles.number}>{index + 1}</Text>
          <Text style={styles.title}>{page.title}</Text>
          <Text style={styles.description}>{page.description}</Text>
        </View>
      ))}
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  page: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 30,
    backgroundColor: '#eff6ff'
  },
  number: {
    fontSize: 20,
    fontWeight: 'bold',
    marginBottom: 12
  },
  title: {
    fontSize: 30,
    fontWeight: 'bold',
    marginBottom: 12
  },
  description: {
    fontSize: 17,
    textAlign: 'center'
  }
});

The example calculates each page's width using useWindowDimensions, which updates when the window dimensions change. Paging can make onboarding feel natural, although a production implementation may also need pagination indicators, navigation buttons, and accessibility support.

22. Improving ScrollView Performance

ScrollView is easy to use, but rendering a large amount of content can negatively affect performance. Each child is rendered, even if it is outside the visible viewport.

Performance Best Practices

• Use ScrollView for small or moderate amounts of content.
• Use FlatList or SectionList for large collections.
• Avoid unnecessarily complex component trees inside scrollable content.
• Use stable keys when generating elements from arrays.
• Avoid expensive calculations inside frequently executed render paths.
• Be cautious about updating React state on every scroll event.
• Use appropriately sized images and avoid loading unnecessarily large assets.
• Test scrolling performance on lower-powered devices.
• Use contentContainerStyle to organize inner content instead of adding unnecessary wrapper components.
• Do not disable scrolling unless it is required by the design or interaction.

23. Common ScrollView and SafeAreaView Mistakes

24. Best Practices for Safe-Area Layouts

• Prefer react-native-safe-area-context for new projects.
• Place SafeAreaProvider near the application root when safe-area information is needed throughout the app.
• Apply safe-area padding only to the edges required by the screen layout.
• Check whether your navigation library already handles some safe-area behavior.
• Avoid applying the same inset in multiple nested containers.
• Test layouts on devices with notches, rounded corners, and different navigation styles.
• Check fixed headers and bottom action bars carefully.
• Combine safe-area handling with ScrollView when content needs to move within the available screen area.
• Remember that safe-area insets and ordinary design padding serve different purposes.
• Keep the visible content comfortably spaced from system interface elements.

25. Practical Project: Scrollable Profile Screen

Project Objective: Create a profile screen that uses safe-area handling, a scrollable content area, profile information, settings cards, and a custom action button.

Project Requirements

• Wrap the screen in SafeAreaProvider and SafeAreaView.
• Use ScrollView to display content that may exceed the screen height.
• Create a profile header.
• Display user information and settings options.
• Use a custom Pressable button.
• Apply consistent styling and content spacing.

Complete Project Code

import React from 'react';
import {
  View,
  Text,
  ScrollView,
  Pressable,
  StyleSheet,
  Alert
} from 'react-native';

import {
  SafeAreaProvider,
  SafeAreaView
} from 'react-native-safe-area-context';

function ProfileScreen() {
  const settings = [
    { id: '1', title: 'Personal Information', description: 'Manage your profile details.' },
    { id: '2', title: 'Notifications', description: 'Control your notification preferences.' },
    { id: '3', title: 'Privacy', description: 'Manage your privacy settings.' },
    { id: '4', title: 'Security', description: 'Review account security options.' },
    { id: '5', title: 'Help and Support', description: 'Find assistance and answers.' }
  ];

  return (
    <SafeAreaView style={styles.safeArea} edges={['top', 'right', 'bottom', 'left']}>
      <ScrollView
        style={styles.scrollView}
        contentContainerStyle={styles.content}
        showsVerticalScrollIndicator={false}
      >
        <Text style={styles.heading}>My Profile</Text>

        <View style={styles.profileCard}>
          <View style={styles.avatar}>
            <Text style={styles.avatarText}>JD</Text>
          </View>

          <Text style={styles.name}>John Doe</Text>
          <Text style={styles.email}>[email protected]</Text>
          <Text style={styles.description}>
            Welcome to your profile. Manage your account information below.
          </Text>
        </View>

        <Text style={styles.sectionHeading}>Account Settings</Text>

        {settings.map(item => (
          <Pressable
            key={item.id}
            style={({ pressed }) => [
              styles.settingCard,
              pressed && styles.settingPressed
            ]}
            onPress={() => Alert.alert(item.title, item.description)}
            accessibilityRole="button"
            accessibilityLabel={item.title}
          >
            <Text style={styles.settingTitle}>{item.title}</Text>
            <Text style={styles.settingDescription}>
              {item.description}
            </Text>
          </Pressable>
        ))}

        <Pressable
          style={({ pressed }) => [
            styles.logoutButton,
            pressed && styles.logoutPressed
          ]}
          onPress={() => Alert.alert('Logout', 'Logout selected.')}
          accessibilityRole="button"
          accessibilityLabel="Log out"
        >
          <Text style={styles.logoutText}>Log Out</Text>
        </Pressable>
      </ScrollView>
    </SafeAreaView>
  );
}

export default function App() {
  return (
    <SafeAreaProvider>
      <ProfileScreen />
    </SafeAreaProvider>
  );
}

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
    backgroundColor: '#f1f5f9'
  },
  scrollView: {
    flex: 1
  },
  content: {
    padding: 18,
    paddingBottom: 36
  },
  heading: {
    fontSize: 28,
    fontWeight: 'bold',
    marginBottom: 20,
    color: '#0f172a'
  },
  profileCard: {
    backgroundColor: '#ffffff',
    padding: 22,
    borderRadius: 14,
    alignItems: 'center',
    marginBottom: 24
  },
  avatar: {
    width: 82,
    height: 82,
    borderRadius: 41,
    backgroundColor: '#dbeafe',
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 12
  },
  avatarText: {
    fontSize: 25,
    fontWeight: 'bold',
    color: '#1d4ed8'
  },
  name: {
    fontSize: 22,
    fontWeight: 'bold',
    color: '#0f172a'
  },
  email: {
    color: '#64748b',
    marginTop: 5
  },
  description: {
    textAlign: 'center',
    marginTop: 12,
    lineHeight: 22,
    color: '#475569'
  },
  sectionHeading: {
    fontSize: 20,
    fontWeight: 'bold',
    marginBottom: 12,
    color: '#0f172a'
  },
  settingCard: {
    backgroundColor: '#ffffff',
    padding: 18,
    borderRadius: 10,
    marginBottom: 12
  },
  settingPressed: {
    backgroundColor: '#e2e8f0'
  },
  settingTitle: {
    fontSize: 16,
    fontWeight: 'bold',
    marginBottom: 5,
    color: '#0f172a'
  },
  settingDescription: {
    color: '#64748b',
    lineHeight: 20
  },
  logoutButton: {
    marginTop: 12,
    backgroundColor: '#dc2626',
    padding: 16,
    borderRadius: 10,
    alignItems: 'center'
  },
  logoutPressed: {
    backgroundColor: '#991b1b'
  },
  logoutText: {
    color: '#ffffff',
    fontSize: 16,
    fontWeight: 'bold'
  }
});

Project Explanation

1. SafeAreaProvider: Supplies safe-area context to the profile screen.
2. SafeAreaView: Protects content from the selected device screen edges.
3. ScrollView: Allows the profile and settings cards to scroll.
4. contentContainerStyle: Adds padding around the scrollable content.
5. Pressable: Makes each settings card and logout action interactive.
6. Dynamic styling: Changes a card's background while it is pressed.
7. Reusable data: The settings array keeps card content organized and easy to extend.
8. Accessibility: Adds a button role and descriptive labels to interactive elements.

The profile details and alerts are for demonstration. In a real application, load profile information from your data source and connect each action to its actual screen or operation.

26. Practice Exercises

Beginner Exercises

1. Create a ScrollView containing five text sections.
2. Create a horizontal ScrollView with four category cards.
3. Hide the vertical scroll indicator and verify that scrolling still works.
4. Use contentContainerStyle to add padding around the scrollable content.
5. Install safe-area-context and create a simple safe-area screen.

Intermediate Exercises

1. Create a profile page using SafeAreaView and ScrollView.
2. Build a registration form with several TextInput fields and keyboard handling.
3. Add a Back to Top button using a ScrollView ref.
4. Display the current scroll position using onScroll.
5. Implement pull-to-refresh using RefreshControl.

Advanced Exercises

1. Create a horizontal onboarding flow using pagingEnabled.
2. Build a dashboard with a fixed header and scrollable content.
3. Create a screen with a safe-area-aware bottom action bar.
4. Compare ScrollView and FlatList for a large dataset.
5. Test safe-area and keyboard behavior on Android and iOS.

27. Interview Questions and Answers

Q1. What is ScrollView in React Native?

Answer: ScrollView is a component that allows users to scroll through content that extends beyond the visible screen area.

Q2. What is the difference between View and ScrollView?

Answer: View is a general layout container, whereas ScrollView provides a scrollable viewport for its children.

Q3. What is the default scrolling direction of ScrollView?

Answer: ScrollView scrolls vertically by default. Setting horizontal={true} enables horizontal scrolling.

Q4. What is contentContainerStyle?

Answer: It styles the inner container that holds the ScrollView's children, making it useful for padding, alignment, and content layout.

Q5. What is the difference between style and contentContainerStyle?

Answer: The style prop applies to the ScrollView viewport, while contentContainerStyle applies to the inner content container.

Q6. What is SafeAreaView?

Answer: SafeAreaView is used to keep content within safe screen edges. The built-in React Native version is deprecated, so new applications generally use SafeAreaView from react-native-safe-area-context.

Q7. What is SafeAreaProvider?

Answer: SafeAreaProvider provides safe-area context so descendant components and hooks can access device-specific inset information.

Q8. What does useSafeAreaInsets do?

Answer: The useSafeAreaInsets hook returns the top, bottom, left, and right safe-area inset values.

Q9. How do you hide the vertical scroll indicator?

Answer: Set showsVerticalScrollIndicator={false} on ScrollView.

Q10. How can you scroll to the top programmatically?

Answer: Create a ref and call scrollTo({ y: 0, animated: true }) on the ScrollView instance.

Q11. What is the difference between ScrollView and FlatList?

Answer: ScrollView renders all children at once, while FlatList virtualizes items and is generally better for large data collections.

Q12. What is pagingEnabled?

Answer: pagingEnabled makes the scroll view settle at page-sized increments, which is useful for onboarding slides and similar interfaces.

Q13. How can you implement pull-to-refresh?

Answer: Pass a RefreshControl component to the ScrollView's refreshControl prop and manage its refreshing state and onRefresh callback.

Q14. How do you handle the keyboard in a scrollable form?

Answer: Use ScrollView with appropriate keyboard props and, when needed, KeyboardAvoidingView. Test the behavior on the target platforms.

Q15. Why might a ScrollView not scroll?

Answer: Its content may not exceed the viewport, or its parent layout may not provide a constrained height. Check the content size and layout hierarchy.

28. Quick Revision Checklist

• Understand the purpose of ScrollView.
• Know that vertical scrolling is the default behavior.
• Use horizontal for horizontally scrolling content.
• Understand the difference between style and contentContainerStyle.
• Configure scroll indicators when needed.
• Use refs for programmatic scrolling.
• Understand onScroll and scroll event data.
• Use SafeAreaProvider with the safe-area-context library.
• Prefer the library's SafeAreaView over the deprecated built-in version for new projects.
• Apply safe-area insets only where required.
• Combine ScrollView and safe-area handling for long screens.
• Handle the keyboard carefully in forms.
• Use RefreshControl for pull-to-refresh.
• Use FlatList or SectionList for large data collections.
• Test scrolling and safe areas on Android and iOS.

29. Conclusion

ScrollView and safe-area handling are essential for building flexible React Native interfaces. ScrollView makes long content accessible through vertical or horizontal scrolling, while safe-area handling protects important content from device-specific screen edges.

For modern applications, react-native-safe-area-context is generally the recommended solution for safe-area management. Combining its SafeAreaProvider and SafeAreaView with ScrollView helps create layouts that adapt to different devices.

Use ScrollView for forms, articles, settings screens, and small collections of content. For large data lists, consider FlatList or SectionList to improve performance. Practice these concepts by creating a scrollable profile page, registration form, and dashboard.

30. Additional Learning Resources

• React Native Official Documentation: ScrollView
• React Native Official Documentation: FlatList
• React Native Official Documentation: KeyboardAvoidingView
• React Native Official Documentation: RefreshControl
• react-native-safe-area-context: Project and Documentation
• React Native Official Documentation: Deprecated SafeAreaView
• React Native Training Course at JustAcademy
• Register for a React Native Course Demo
• JustAcademy Official Website